<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .tab{
            width: 300px;
            height: 300px;
            border: 1px solid red;
            margin: 50px auto;
        }
        .tab input{
            width: 100px;
            height: 30px;
            float: left;
            background-color: #fff;
        }
        .tab .active{
            background: red;
            color: #fff;
        }
        .tab li{
            width: 300px;
            height: 270px;
            background: black;
            text-align: center;
            line-height: 270px;
            font-size: 100px;
            color: #fff;
            display: none;
        }
        .tab .show{
            display: block;
        }
        .tab section{
            overflow: hidden;
        }
    </style>
    <script type="text/javascript">
    	class Tab{
                constructor(str){
                    this.parent=document.querySelector(str)
                    this.aBtnList = this.parent.querySelectorAll('input')
                    this.aLiList = this.parent.querySelectorAll('li');
               this.show();
                }
                show(){
                    let _this =this
                    for(let i=0; i<this.aBtnList.length;i++){
                        this.aBtnList[i].onclick=function () {
                            _this.index=i
                            _this.fn(_this.index);
                    }
                }
            }
            fn(i){
                for (var j=0;j<this.aLiList.length;j++){
                    this.aBtnList[j].className='';
                    this.aLiList[j].className=''
                }
                this.aLiList[i].className='show'
                this.aBtnList[i].className='active';
            };
            }

            class AutoPlayTab extends Tab{
                constructor(str){
                    super(str)
                    this.autoFn()
                    this.index=0;
                }
                autoFn(){
                    var _this=this;
                    setInterval(function () {
                        _this.index++;
                        if(_this.index==_this.aBtnList.length){
                            _this.index=0;
                        }
                        _this.fn(_this.index)
                    },2000)
                }
            }



            window.onload=function () {
                new Tab('#tab');
                new AutoPlayTab('#tab2');
        }
    </script>
</head>
<body>
<div class="tab" id="tab">
    <section class="btnBox">
        <input class="active" type="button" value="按钮一">
        <input type="button" value="按钮二">
        <input type="button" value="按钮三">
    </section>
    <ul>
        <li class="show">1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

<div class="tab" id="tab2">
    <section class="btnBox">
        <input class="active" type="button" value="按钮一">
        <input type="button" value="按钮二">
        <input type="button" value="按钮三">
    </section>
    <ul>
        <li class="show">1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>
</body>
</html>